<template>
	<div>
		<div class="wrapper">
			<div class="abgimg boll" @mousemove="mousemove" @mouseleave="mouseleave">
				<img class="bollimg" src="../../static/img/rrcy_wmcj.jpg" />
				<div @click="abgimgClick">
					<span style="margin-left: 5px;font-size:10px;">关闭</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				_wrapper: null,
				_boll: null,
				times:null
			}
		},
		mounted() {
			this.getSET()
		},
		methods: {
			//移入暂停
			mousemove(){
				console.log('mousemove')
				clearInterval(this.times)
			},
			// 移出开始
			mouseleave(){
				console.log('mouseleave')
				this.getSET()
			},
			//点击关闭
			abgimgClick(){
				var _boll = document.querySelector(".boll");
				console.log('_boll',_boll)
				_boll.style.display = 'none'
			},
			getSET() {
				var _wrapper = document.querySelector(".wrapper");
				var _boll = document.querySelector(".boll");
				var speedX = 5; //x速度
				var speedY = 5; //y速度
				this.times = setInterval(function() {
					//如果到最右边，需要反方向
					if (_wrapper.clientWidth - _boll.offsetLeft <= _boll.offsetWidth) {
						speedX *= -1;
					}
					_boll.style.left = (_boll.offsetLeft + speedX) + "px";
					//如果到最上边，需要反方向
					if (_boll.offsetTop <= 0) {
						speedY *= -1;
					}
					_boll.style.top = (_boll.offsetTop - speedY) + "px";
					//到最下面，需要反向
					if (_wrapper.clientHeight - _boll.offsetTop <= _boll.offsetHeight) {
						speedY *= -1;
					}
					//到最左边，需要反向
					if (_boll.offsetLeft <= 0) {
						speedX *= -1;
					}
				}, 500)
			}
		}
	}
</script>

<style>
	
</style>
